/**
 *  将项目常用的可复用的样式放在这里
 **/
$primary: var(--el-color-primary);
$titleColor: var(--el-text-color-primary);
$contentColor: var(--el-text-color-regular);
$bgColor: var(--background-color);
$borderColor: var(--border-color);
$tableBgColor: var(--table-bg-color);

@mixin vertical-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.primary-color {
  color: $primary;
}

/*-------------flex-----------------*/
.flx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flx-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flx-align-center {
  display: flex;
  align-items: center;
}

/*-------------clearfix-----------------*/
.clearfix::after {
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
  content: '';
}

/*-------------文字多了自动換行-----------------*/
.break-word {
  word-break: break-all;
  word-wrap: break-word;
}

/*-------------scrollbar-----------------*/
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color-darker);
  border-radius: 20px;
}

/* -------------nprogress----------------- */
#nprogress {
  pointer-events: none;

  .bar {
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--g-nprogress-color);
  }

  .peg {
    display: block;
    position: absolute;
    right: 0;
    width: 100px;
    height: 100%;
    opacity: 1;
    transform: rotate(3deg) translate(0, -4px);
    box-shadow:
      0 0 10px var(--g-nprogress-color),
      0 0 5px var(--g-nprogress-color);
  }

  .spinner {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 11px;
    right: 14px;

    .spinner-icon {
      width: 18px;
      height: 18px;
      box-sizing: border-box;
      border: solid 2px transparent;
      border-radius: 50%;
      animation: nprogress-spinner 400ms linear infinite;
      border-top-color: var(--g-nprogress-color);
      border-left-color: var(--g-nprogress-color);
    }
  }
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;

  #nprogress .spinner,
  #nprogress .bar {
    position: absolute;
  }
}

@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
